<template>
	<!-- 登录 -->
	<div class="login">
		<div class="login-box">
			<img src="../assets/images/bg/bg4.jpg" alt="" class="login-box-img">
		</div>
		<h3 class="title">OnePrecious</h3>
		<div class="login-form">
			<el-form ref="form" :model="form" :rules="rules" label-width="80px" size="mini">
				<el-form-item label="账号" size="mini" prop="name">
					<el-input type="name" v-model="form.name" placeholder="请输入账号" style="width: 90%"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input v-model="form.password" type="password" placeholder="请输入密码" style="width: 90%">
					</el-input>
				</el-form-item>
				<el-form-item label="验证码" prop="code">
					<el-input v-model="form.code" auto-complete="off" placeholder="请输入验证码" style="width: 53%">

					</el-input>
					<div class="login-code" @click="refreshCode">
						<s-identify :identifyCode="code.create" :contentWidth="width" :contentHeight="height"></s-identify>
					</div>
				</el-form-item>
				<el-form-item>
          <el-button type="primary" @click="onSubmit">登录</el-button>
          <router-link to='/index'  class="login-btn">
            <el-button>
              返回
            </el-button>
          </router-link>
        </el-form-item>
			</el-form>
		</div>
	</div>
	<div class="footer">
		<Footer></Footer>
	</div>
</template>

<script>
	import SIdentify from '../components/text/sidentify.vue'
	import Footer from '../components/layout/Footer.vue'

	import {
		ElMessage
	} from 'element-plus'
	import {
		reactive,
		onMounted,
		ref,
		toRefs
	} from 'vue'
	import axios from 'axios'
	export default {
		name: "Login",
		components: {
			SIdentify,
			Footer
		},
		data() {
			return {
				form: {
					name: '',
					password: '',
					code: ''
				},
				code: {
					numder: '23456789',
					alphabet: 'AaBbCcDdEeFfGgHhJjKkMmLNnPpQqRrSsTtUuVvWwXxYyZz',
					create: '',
				},
				rules: {
					name: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}, {
						min: 3,
						max: 20,
						message: '长度在 3 到 20 个字符',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}, {
						min: 3,
						max: 20,
						message: '长度在 3 到 20 个字符',
						trigger: 'blur'
					}],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					}, {
						min: 4,
						max: 4,
						message: '只有4个字符',
						trigger: 'blur'
					}],
				},
				width: '100',
				height: '30',
				codeImg: ''
			}
		},
		created() {
			this.refreshCode();
		},
		methods: {
			getCodeOut() {
				axios.get('http://192.168.2.2:7000/precloues/oauth/login/code', {
					'responseType': 'arraybuffer' //arraybuffer blob
				}).then((result) => {
					console.log(result)
					/*let bytes = new Uint8Array(result.data);
					console.log(result.data)
					let storeData = "";
					let len = bytes.byteLength;
					console.log('len:' + len);
					for (let i = 0; i < len; i++) {
						storeData += String.fromCharCode(bytes[i]);
					}
					console.log('storeData:' + storeData);
					this.codeImg = 'data:image/png;base64,' + window.btoa(storeData);
					 */
					/* let bytes = new Uint8Array(result.data);
					console.log(result.data)
					let storeData = "";
					let len = bytes.byteLength;
					console.log('len:' + len);
					console.log('storeData:' + storeData);
					this.codeImg = 'data:image/png;base64,' + btoa(String.fromCharCode(bytes)); */

					if (process.env.NODE_ENV !== 'production') {
						console.log(process.env.NODE_ENV)
					}

					/* let blob = new Blob([result], {
						type: 'image/png'
					});
					// let url = window.URL.createObjectURL(blob);
					let src = window.URL.createObjectURL(blob)
					// const src = window.URL.createObjectFile(result)
					console.log(src, reg)
					this.codeImg = src; */
				})
			},
			fan(msg) {
				ElMessage.warning({
					message: msg,
					type: 'warning'
				});
			},
			//验证码
			randomNum(min, max) {
				let num = Math.floor(Math.random() * (max - min) + min);
				return num;
			},
      //获取验证码
			refreshCode() {
				this.code.create = '';
				this.makeCode();
			},
      //验证码生成规则
			makeCode() {
				//随机两个数
				let num1 = this.randomNum(0, this.code.numder.length);
				let num2 = this.randomNum(0, this.code.alphabet.length);
				let num3 = this.randomNum(0, this.code.numder.length);
				let num4 = this.randomNum(0, this.code.alphabet.length);

				let code = this.code.numder[num1] + this.code.alphabet[num2] + this.code.numder[num3] + this.code.alphabet[
					num4];

				code.toUpperCase();
				this.code.create = code;
			},
			//点击按钮
			onSubmit() {
        this.$refs.form.validate((valid) => {
          if (!valid) {
            this.fan('请输入完整！');
            return false;
          }
          //验证code
          let code = this.form.code;
          code.toUpperCase();
          if (code === this.code.create) {
            console.log('成功！预留登录接口');
          } else {
            this.fan('验证码不正确！');
          }
        });
      }
		}
	}
</script>

<style>
	body {
		background-color: rgb(217 236 255);
	}

	.footer {
		position: absolute;
		bottom: 0px;
		height: 96px;
		width: 100%;
	}

	.login {
		width: 360px;
		height: 490px;
		background: rgb(255, 255, 255);
		border-radius: 10px;
		border: 1px solid rgba(43, 42, 42, 0.27);
		position: absolute;
		left: 50%;
		margin-left: -181px;
		top: 15%;
		z-index: 10;
		overflow: overlay;
	}

	.login-box {
		width: 360px;
	}

	.login-box-img {
		width: 360px;
	}

	.login-form {
		width: 360px;
	}

	.login-form-input {
		width: 100px;
	}

	.title {
		margin: 0px auto 30px auto;
		text-align: center;
		color: #000;
		font-weight: bold;
	}

	.from-title {
		width: 80px;
		color: #fff;
		font-weight: bold;
	}

	.login-code {
		cursor: pointer;
		width: 100px;
		height: 30px;
		float: right;
		margin-right: 10%;
	}

  .login-code > img {
    width: 100px;
    height: 30px;
  }

  .login-btn {
    margin-left: 20px;
  }
	/* 响应事件 宽小于768时 */
	@media screen and (max-width:768px) {
		.login {
			top: 8% !important;
		}
	}
</style>
